<template>
  <view v-if="show" class="mask" @click="close">
    <view class="box" @click.stop>
      <view class="tit">{{ title }}</view>
      <view class="row" v-for="f in fields" :key="f.key">
        <text class="label">{{ f.label }}</text>
        <input v-if="f.type!=='textarea'" v-model="form[f.key]" :placeholder="'请输入'+f.label" />
        <textarea v-else v-model="form[f.key]" :placeholder="'请输入'+f.label" auto-height />
      </view>
      <view class="btns">
        <button @click="close">取消</button>
        <button @click="ok" type="primary">保存</button>
      </view>
    </view>
  </view>
</template>
<script setup>
import { reactive, ref, watch } from 'vue'
const props = defineProps({ title:String, fields:Array, data:Object })
const emit  = defineEmits(['submit'])
const show  = ref(false)
const form  = reactive({})
const open = (row) => {
  props.fields.forEach(f => form[f.key] = row ? row[f.key] : '')
  show.value = true
}
const close = () => show.value = false
const ok = () => emit('submit', { ...form })
defineExpose({ open, close })
</script>
<style scoped>
.mask{ position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; }
.box{ background:#fff; border-radius:12rpx; width:80vw; padding:30rpx; }
.tit{ font-size:32rpx; margin-bottom:20rpx; text-align:center; }
.row{ margin-bottom:20rpx; }
.label{ display:block; margin-bottom:8rpx; font-size:28rpx; }
.btns{ display:flex; gap:20rpx; justify-content:flex-end; }
</style>